<template>
	<view class='productSort copy-data'>
		<view class='header acea-row row-center-wrapper'>
			<view class='acea-row row-between-wrapper input'>
				<text class='iconfont icon-sousuo'></text>
				<input type='text' placeholder='点击搜索商品信息' confirm-type='search' name="search"
					placeholder-class='placeholder'></input>
			</view>
		</view>
		<view class='aside'>
			<view @click="tab(key)" :class='key==navActive?"on":""' v-for="(item,key) in productList" :key="key"
				class='item acea-row row-center-wrapper'><text>{{item.cate_name}}</text></view>
		</view>
		<view class='conter'>
			<scroll-view scroll-y="true" :scroll-into-view="toView" :style="'height: '+height+'rpx;'"
				scroll-with-animation='true' @scroll="scroll">
				<block v-for="(item,key) in productList">
					<view class='listw' :id="'b'+key">
						<view class='title acea-row row-center-wrapper'>
							<view class='line'></view>
							<view class='name'> {{item.cate_name}} </view>
							<view class='line'></view>
						</view>
						<view class='list acea-row'>
							<block v-for="(itemn,key) in item.children">
								<navigator  hover-class='none' :url='"/pages/goods_list/index?sid="+itemn.id+"&title="+itemn.cate_name'  class='item acea-row row-column row-middle'>
									<view class='picture'>
										<image v-if="itemn.pic" :src='itemn.pic'></image>
										<image v-else src='/static/images/sort-img.png'></image>
									</view>
									<view class='name line1'> {{itemn.cate_name}} </view>
								</navigator>
							</block>
						</view>
					</view>
				</block>
				<view :style='"height:"+(height-300)+"rpx;"'></view>
			</scroll-view>
		</view>
		<z_tabBar :pagePath="'/pages/goods_cate/goods_cate'"></z_tabBar>
	</view>
</template>

<script>
	console.log("path:",location);
	import z_tabBar from "@/pages/index/components/z_tabBar.vue";
	import {
		getCategoryList
	} from '@/api/api.js';
	export default {
		components: {
			z_tabBar
		},
		data() {
			return {
				productList: [],
				navActive: 0,
				toView: "",
				height: 0,
				hightArr: []
			}
		},
		onLoad() {
			this.getAllCategory();
			this.infoScroll();
		},
		methods: {
			getAllCategory() {
				// 获取分类详细信息
				getCategoryList().then(res => {
					this.productList = res.data.data;
					console.log("??---", this.productList);
					this.$nextTick(()=>{
						this.getProductListArr();
					})
				})
			},
			tab(index) {
				this.navActive = index;
				this.toView = "b" + index;
				console.log(this.toView);
			},
			infoScroll() {
				// 滚动高度等信息
				uni.getSystemInfo({
					success: res => {
						this.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
						console.log("height", this.height);
					},
				});
			},

			getProductListArr() {
				// 获取渲染商品的高度数组
				let len = this.productList.length;
				let hightArr = [];
				for (let i = 0; i < len; i++) {
					//获取元素所在位置
					let query = uni.createSelectorQuery().in(this);
					let idView = "#b" + i;
					query.select(idView).boundingClientRect();
					query.exec((res) => {
						let top = res[0].top;
						hightArr.push(top);
						this.hightArr = hightArr
					});
				};
			},
			scroll(e) {
				// 滚动右边左边菜单切换
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.productSort .header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input input {
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
	}

	.productSort .aside {
		position: fixed;
		width: 180rpx;
		left: 0;
		top: 0;
		background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden;
		height: auto;
		margin-top: 96rpx;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid #fc4141;
		width: 100%;
		text-align: center;
		color: #fc4141;
		font-weight: bold;
	}

	.productSort .conter {
		margin: 96rpx 0 0 180rpx;
		padding: 0 14rpx;
		background-color: #fff;
	}

	.productSort .conter .listw {
		padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 90rpx;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
	}

	.productSort .conter .list .item {
		width: 177rpx;
		margin-top: 26rpx;
	}

	.productSort .conter .list .item .picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
</style>
